はてなブックマーク

2026年3月に Reporting API というWeb標準 API が Baseline に到達し主要ブラウザで利用可能になりました。 今回はこの便利な Reporting APIを実際に使ってみて、できることやユースケースについて考えてみます。 Reporting API とは Webアプリケーションを運用していると、こんな問題に遭遇したことはないでしょうか。 本番環境でだけ CSP 違反が起きているが、ユーザーからの報告がない限り気づけない 使っている API がいつの間にか非推奨になっていて、将来のブラウザアップデートで壊れるかもしれない ブラウザが勝手に動画の自動再生をブロックしたが、ログに残っていない これらはすべて ブラウザ側で発生するイベント であり、従来のサーバーサイドの監視では捕捉できないものです。 このような場面で役に立つのが、Reporting API です。 R

Claude Code 2.1.101 で /team-onboarding なるコマンドが追加されました。 github.com 名前的にはプロジェクトを解析して、最初に学習すべきフレームワークやライブラリなどを整理してくれるもの...と思いきやそうではないようです。Helpをみると、どうもそのプロジェクトでClaude Codeを使いこなすためのオンボードを作成してくれるらしい。 Help teammates ramp on Claude Code with a guide from your usage あなたの使用状況に基づいたガイドで、チームメイトがClaude Codeを使いこなせるようサポートしましょう。 ということで、今回はValibotで /team-onboarding を試してみることにします。 /team-onboardingを叩いてみる まずはZodで/team-

昨日、Google Cloud Generative AI Leader という資格試験を受験し、見事合格することができました。勉強期間は1週間ほどで、時間換算だと16時間ほどだと思います。 今回はこのGoogle Cloud Generative AI Leaderが気になってる人に向けて、この認定資格がどういうもので、どのように攻略するのがいいか？についてお話しします。たまにはこういうエントリも悪くないでしょう。 Google Cloud Generative AI Leader とは Google Cloud Generative AI Leader は 2025年5月15日にGAされた Google Cloud のかなり新しい認定資格です。 認定試験ガイドによると Google Cloud Certified 生成 AI リーダーは、先見性のあるプロフェッショナルであり、生成 AI

Vitest 4.1 で aroundEach と aroundAll という新しいライフサイクルフックが追加されました。 github.com これらは文字通り、テストを 前後からwrapする フックです。aroundEach は各テストを、aroundAll はスイート全体をwrapします。runTest() や runSuite() の呼び出しを自分のコードで囲む構造になっており、名前のとおり"around"に処理を置けます。 しかしここで疑問が浮かびます。既存の beforeEach / afterEach で書けていたことが多い中で、なぜ新しいフックが必要だったのか説明できますか？ このエントリでは実際にコードを動かしながら、aroundEach / aroundAll / beforeEach / afterEachのユースケースについて確認していきます。 beforeEach

ソフトウェア開発におけるコードレビューは品質保証の要です。しかし、レビューの質はレビュアーの専門知識と集中力に大きく依存し、人間のレビューでは見落としが避けられません。 この課題に対して、Linuxカーネル開発コミュニティから生まれたのがSashikoです。 sashiko.dev 本記事では、Sashikoの仕組みを詳しく解説し、それをJavaScript/TypeScriptライブラリのレビュー向けにカスタマイズしたSashiko JSについて紹介します。 Sashikoとは何か？ Sashiko（刺し子）は、Google社員のRoman Gushchin氏が開発したAIを用いたバグ発見システムです。特にLinuxカーネルのパッチをAIで自動レビューします。名前の由来は日本の伝統的な補修刺繍技法で、「布の弱い部分を補強する」という意味が、コードの脆弱な部分を見つけ出すという使命に重ねら

Coding Agent全盛の今、Docs as Code*1を用いたContext Engineeringが本格化しています。 最近OpenAIによって提唱された新たな概念・Herness Engineeringにおいても、もはやAIへ与えられる設計ドキュメント(コンテキスト)は前提として語られているほどです。 openai.com またエムスリー様においても、Docs as Codeの取り組みについてエントリが公開されていました。 www.m3tech.blog Docs as Codeを進める上で直面した課題 自分自身、とあるプロジェクトのテックリードとしてDocs as Codeを推し進めているのですが、その過程で直面した問題がありました。 Docs as Codeとして文書を作成するうえで、AIが好きに読み書きでき編集できる場所にドキュメントを置くことを考えると、必然的にアプリケ

2026年2月25日、GitHub Copilot CLIがついにGAされました。 github.blog そこで今回はまだGitHub Copilot CLIをまだ見てない/触ってない という人向けに、ざっくりと使い勝手やベストプラクティスを3分で知ってもらえるような記事を書いてみました。 検証のコンテキスト 突然ですが、openapi-zod-clientというライブラリがあります。 github.com openapi-zod-clientはOpneAPI Specに定義された内容をZod Schemaへ変換してくれるライブラリです。一方でZodはTypeScript界隈では言わずと知れた型Schemaライブラリです。parseにより、データがSchemaに定義した型や形式に一致するかを検証することができます。 ところで、Zodは2025年4月のリリースでそれまでのV3からV4へと大

このエントリはDevin Meetup Osaka #1での発表内容です。登壇資料をブログとして読めるように再構成して公開しています。 はじめに コーディングエージェントの普及によって、PRの数は増加し、1つひとつのサイズも大きくなっています。Devinの開発元のCognitionは公式ブログで以下のように述べています。 cognition.ai code review—not code generation—is now the bottleneck to shipping great products. これはAIがコードを書く時代において、レビュワーの理解が追いつかなくなっているという問題です。PRが小さければ読みやすいですが、大きくなると形式的な承認(いわゆる「Lazy LGTM」)になりがちです。 上記のBlog: "Devin Review: AI to Stop Slop"

方法 以下のスクリプトを ご自身のブログの詳細設定 -> 要素にメタデータを追加 に貼り付ける。 <script type="module" src="https://cdn.jsdelivr.net/gh/ysknsid25/beautiful-mermaid@main/dist/beautiful-mermaid.browser.min.js"></script> するとこういう感じでスタイリッシュなMermaid図を表示することができます。 ただし普通に表示すると幅や高さが大きいと親要素を突き抜けて表示されてしまうため、たとえば以下のようにCSSでレイアウトを指定する必要があります。 .mermaid-rendered { max-width: 100%; overflow-x: auto; svg { max-width: 100%; height: auto; } } やることは

このエントリはTSKaigi Mashup Kansai 生成AIでTSを扱うときに考えたい設計&ガードレールでの発表内容です。登壇資料をブログとして読めるように再構成して公開しています。 はじめに 去年あたりは「ジュニアエンジニアレベルと思ってね」と公式各所から言われていたコーディングエージェントも、もはやそのレベルを超えてきました。 今や副操縦席に座っているのは人間の側です。しかし、AIが機長だからといって自由に飛行機を操縦してよいかというとそうではありません。決められた航路や離着陸の手順を守る必要があり、そこを外れないガードレールが必要です。 またこれはAIに限った話でもありません。AIであれ人間であれ、「開発者」はもれなく全員が決められたルールに違反しないようコードを書くべきです。またレビュワーも完璧ではありません。問題に気づかないまま変更を承認してしまうこともあるでしょう。 なの

最近、Next.jsがどのようにCSRF対策をしているのかを考える機会がありました。 そんななかで色々と学んだことを今回は書きます。 CSRFとは 本題に入っていく前に、いま一度CSRFについて改めて復習しておきましょう。CSRF(Cross-Site Request Forgery)とは、ユーザーが意図しないリクエストを攻撃者が勝手に送信させる攻撃です。以下に攻撃の一連の流れを可視化しています。 sequenceDiagram participant User as ユーザー participant Bank as 銀行サイト (bank.example) participant Evil as 悪意のあるサイト (evil.example) User->>Bank: ログイン（セッションCookieを取得） User->>Evil: 悪意のあるページを開く Evil->>User: 自

Webブラウザで数KBのJSONを取得するなら標準の fetch で十分ですが、例えばブラウザ上のWeb Viewerで画像を数十枚表示するなどのユースケースに標準のfetchで対応しようとする場合以下のような問題がつきまとうことが多いでしょう。 再開不能: ネットワーク瞬断やリロードでダウンロード進捗が0に戻る 整合性不明: ダウンロードが完了しない限りファイルが破損なくダウンロードできているかわからない メモリ逼迫: 全データをメモリに展開する必要があり、クラッシュのリスクがある これらの問題を解決するためのライブラリとして、今回は VerifyFetch を使ってみようと思います。 github.com VerifyFetchの特徴 先述の3つの問題への対処として、VerifyFetchは3つの機能を提供しています。 1. 分割ダウンロードと都度検証 VerifyFetchでは、あら

先週はcronからsystemd timerへ移行する記事が話題になっていましたね。 zenn.dev これに乗っかる形で(？)、今回は依存関係0で超軽量なJS/TS製スケジューラー Croner を紹介してみようと思う。 Cronerとは github.com 最大の特徴はゼロ依存であること。実行時に余計なパッケージを一切含まず、バンドルサイズが非常に小さいのが魅力だ*1。 またJSRにも公開されていて、Bun、ブラウザでの動作も保証してくれているのが嬉しい。ブラウザでの利用用途としては、フロントエンドで定期的なポーリング処理を行いたい場合などが考えられる。 さっそくサンプルを動かしてみる import { Cron } from "croner"; console.log("Croner demo started. Waiting for the next execution...")

Vibiumは、ブラウザ操作自動化ツール・Seleniumの作者であるJason Huggins氏の新作だ。 github.com READMEによると、 Vibium is browser automation infrastructure built for AI agents. A single binary handles browser lifecycle, WebDriver BiDi protocol, and exposes an MCP server — so Claude Code (or any MCP client) can drive a browser with zero setup. Works great for AI agents, test automation, and anything else that needs a browser. と、単一バ

Devinの新たな機能として Devin Reviewというレビュー機能がリリースされた。 cognition.ai 上記のブログを読んでみると、Public リポジトリのPRの場合であれば、URLをhttps://github.com/org/repo/pull/123 からhttps://devinreview.com/org/repo/pull/123のように書き換えるだけで利用できるらしい。 というわけでちょうどOSSに出していたPRを使って色々と試してみたことをメモする。 いろいろ試してみる レビュー開始 URLを書き換えてDevin Reviewへ飛んでいく。基本的にファーストビューではDevin Reviewの情報が表示される。タブを切り替えることでGitHub上でのコメントなどを確認することも可能。 1,2分待つとレビューが終わり、いろいろと確認できるようになる。 PRの概

タイトルの通り。ライトテーマとダークテーマの2種類をはてなテーマストアに公開した。 blog.hatena.ne.jp blog.hatena.ne.jp テーマストアにはデモページを掲載している。が、このブログのスタイル自体が「Git Style」のライトテーマなので、このブログを見るのが一番いいと思う。ちなみにライトもダークもレスポンシブに対応している。 元ネタ git-scm.com Gitの公式サイト。フォントと背景色、フォントカラーなどを参考にしている。ページのレイアウト自体など左記以外は、はてなさんが公開してくださっているboilerplateからほぼ変えていない。 モチベーション 元々は公式テーマのSmoothを使っていた。Smoothは洗練されていてすごくいいテーマだと思うんだけど、細かいところで自分好みに変えたいということと、Gitの公式サイトがかっこいいのでそれに寄せた

この記事はHono Advent Calendar 2025 最終日の記事です。今回は自分が作ったeslint-pluginについて書く。とりあえず作ったものを見て！！そしてLGTMならStarください！！！ github.com きっかけ Honoは非常に柔軟で軽量なWebフレームワークだけど、自由度が高いゆえにチーム開発や規模が大きくなった際にコードの書き方が統一されにくいという課題に直面することがある。特にAIにコーディングをさせているとこの傾向は顕著だ。これは自分がHono Conference 2025での発表内容で登場したプロジェクトを進めているときの経験談からきている*1。 そこで思いついたのがESLintでガードレールを設けること。 そして自作する前にさらっと調べてみたところ、まだ誰かが作って世界に公開している様子はなさげ。ってことで「お、自分で作るか」となった。 インスト

最近、いくつかのライブラリをnpmに公開した。公開したものは以下。是非使ってみてissueなりPRなり送ってほしい。 github.com github.com ところで、ローカルからnpmにライブラリを公開する場合、基本的に以下のコマンドを叩けば良い。 npm login npm publish これで少なくともライブラリは公開することができる。けど、npmに限らずどこかしらのレジストリに作ったライブラリを公開する場合、バージョン管理がとても重要になる。今回初めてnpmにライブラリを公開してみて、npm versionを使いこなせた方がいいことがわかった。 そんなわけで、このエントリではnpm versionの便利な機能をつらつらと書いていく。 Gitタグを自動生成してくれる npm version はバージョン変更のコミットと、そのバージョン番号の Git タグ（例: v0.1.0）を

Commander.jsはJS/TS向けのCLI作成キットだ。 github.com こういう感じでCLIに必要な要素をガリガリと定義していける。 const { program } = require('commander'); program .option('--first') .option('-s, --separator <char>') .argument('<string>'); program.parse(); const options = program.opts(); const limit = options.first ? 1 : undefined; console.log(program.args[0].split(options.separator, limit)); なんでCommander.jsに目がいったのか？ 最近Hono CLIをずっと見ているか

TSKaigi Hokurikuの登壇資料です 自己紹介 github.com npx deno run jsr:@ysknsid25/whois 補足 以下では UnJS製ライブラリ citty 入門 として、モダンで型安全なCLIを最速でつくるチュートリアルを提供する。 cittyとは unjs.io Nitroとかh3とかいろいろいい感じのライブラリを作ってるUnJSのライブラリの一つ。いい感じにCLIツールを作れる。 準備 npm install citty 公式のサンプルソースを拝借。 import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI Ap

Kotlin Fest 2025の登壇資料です 以下補足 はんずおんExposed ExposedはKotlin向けに作られたJetBrains社製のORM。Ktor×Exposedでのバックエンドアプリケーションの導入事例はほとんど見られず、Exposedに関するノウハウがあまり出回っていない印象がある。 事実、プロシージャやらファンクションやらcaseやら複雑なサブクエリやらを使ったSQLをExposedに移植しようとした際に非常に困った。なぜなら、この辺のノウハウは当時のExposed Wikiにはしっかり書かれておらず、ソースコードを解析するしかなかったので。 とまあそんな悲しい歴史を繰り返さないために執筆した本がこちら。 techbookfest.org iolite github.com 日付、メールアドレス、IPアドレスなど仕様が必ず決まっていて、かつ世界のいろんな場所で繰り

転職先でGoをやるって聞いてたので有給消化中に『初めてのGo言語』を読んでいた。 初めてのGo言語 第2版 ―他言語プログラマーのためのイディオマティックGo実践ガイド 作者:Jon BodnerオライリージャパンAmazon けどそれよりも先にA Tour of Goをやっとくのが正解だった*1。書籍自体はGo言語の仕様について詳しく書かれていてめっちゃいい本なんだけど、100%僕の頭と書籍の使い方が悪かった。 go-tour-jp.appspot.com 「Goの基本完全に理解した」状態で『初めてのGo言語』はもう一回読むことにする。それはそれでより理解が深まりそう。 A Tour of Go についての簡単な説明 左にチュートリアル、右にコーディングエディタがあるUIになっている。トピックスごとにベースのコードを用意してくれていて、ガチャガチャ手元で書き換えて、フォーマットして、実行

先日のAtCoder Beginner Contest 424でようやく入緑することができた。足掛け3年。長い道のりだった。言語はPython*1。 とりあえず祝ってほしいので先に干し芋を貼っておく。記事執筆時点であと2人で読者が100人になるので、お祝いに読者になってくれるとめちゃくちゃ嬉しい。 www.amazon.jp アルゴリズム部門での緑色以上の人数割合は レーティングのしくみ - AtCoderInfo によると2023 年時点で 7.86 % 程度。全体だと15.48%に入るらしい。 色ごとの絶対的な実力はchokudaiさんのエントリによるとこんな感じ。 印象としては、 学生ならかなり優秀。 エンジニアとしてもある程度の安心感がある。論理的に複雑な処理の実装に対応できない、なんてことはなさそう、くらいには思える。データ量が多い現場など、計算量の多い処理が要求される現場でなけ

ここでいう壁打ちとはテニスやバレーボールなどにおける練習方法のことではなく、思考整理の文脈における壁打ちである。 自分がこれから話そうとしている「壁打ちとは」について簡単に整理しておくと、 問題解決において、解決方法のとっかかりを得るためのコミュニケーション 相手に答えや解決策を求めるのではなく自分の考えやアイデア、思ってることなどをひたすら思いつくままに話す 相手には適度に相槌を打ってもらったり、意見などを出してもらう これを繰り返すうちに自分自身で気づきや整理が進む 感じのことを指す。 今回は自分が壁打ちをする側として気をつけていることなどを書く*1。 とにかくたくさん打つ。そのためにボールを準備する 壁打ちでは、とにかくたくさんボールを打つことが大事だと思っている。 そのためには簡単な準備段階をしておくのが良い。その時点で自分が思っていることや考えていることを5~10分と時間を決めて

最近pnpmのドキュメントを眺めていたんだけど、そこでよく知らない依存関係の種類が出てきた。いまさら人に聞くのは恥ずかしいと思ったので、理解したことをまとめてアウトプットしておく。 そもそも依存関係とは？ package-lock.jsonとは？ といった話は理解できている前提で書く。 dependencies / devDependencies 最も基本となる依存関係。npm installするとdependenciesに書かれたものは全てインストールされることになる。 なので、本番環境で使うものしかここには入れてはいけない。「ではそれ以外のものはどこにいれるのか？」となるが、基本的にはdevDependenciesとなる。 この話自体はいろんな記事やカンファレンスのトークで擦られ続けているので、もうお腹いっぱい感がある。 一応書くと、devDependenciesにインストールするには

コミュニケーションで1番重要なことはなんだろう？ 「自分が何を伝えたか？」は大前提として「相手に何が伝わったか？」ではないだろうか。なので、「前にも言ったけど」を言ってしまうとき、往々にしてこの原則が守られていない。 かのアイルランドの劇作家、バーナード・ショーは「コミュニケーションにおける最大の問題は、それが達成されたという幻想である」という言葉を残している。 「前にも言ったけど」という枕詞は相手にストレスをかけるだけだ。本質であるコミュニケーションの改善には寄与しない。むしろ悪化させるだけだ。日常的に発していることに心当たりがあるのなら、そのスタンスを見直す必要がある。 そのために心がけていることを話す。 自分の心の持ち方を変える 「前にも言ったけど」と言いたくなるのは、相手が覚えていないことへの苛立ちや、自分の説明コストが重なっていると感じているからだ。この感情とうまく付き合うために